import React, {forwardRef, useEffect, useImperativeHandle, useState} from "react";
import { Table, TableColumnType, message } from "antd";
import { couponTypes  } from "@/constants/types";
import { calculateTableWidth } from "@/utils/util";
import XlTableDictColumn from "@/components/Table/XlTableDictColumn";
import { useComponentDidMount } from "@/hooks";
import { fetchCouponList } from "../services";


interface tabProps {
  activeKey: string;
  tabKey: string,
  tabChangeShouldUpdateTab: string[],
  searchValue: any
}

const CouponListTable = forwardRef(({activeKey, tabKey, tabChangeShouldUpdateTab, searchValue}: tabProps, ref) => {
  const [dataSource, setDataSource] = useState([]);
  const [pagination, setPagination] = useState({
    pageNum: 1,
    pageSize: 10,
    total: 0
  });


  const search = async (params:any) => {
    const res = await fetchCouponList({
      ...params,
      ...searchValue
    });
    setDataSource(res?.data || []);
    setPagination({
      ...params,
      total: res?.total
    });
  }


  const refreshTable = () => {
    if (activeKey !== tabKey) {
      return ;
    }
    search({
      pageNum: 1,
      pageSize: 10
    });
  }


  const fieldColumns: TableColumnType<couponTypes> [] = [
    {
      title: '优惠券名称',
      dataIndex: 'name',
      width: 150
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: 120,
      render: (_, record) => <XlTableDictColumn value={record?.type} type="couponType" />
    },
    {
      title: '内容',
      dataIndex: 'content',
      ellipsis: true,
      width: 150,
      render: (_, record) => {
        const arr = record?.content?.split('，');
        return (
          <>
            {arr?.map(v => <div key={v}>{v}</div>)}
          </>
        )
      }
    },
    {
      title: '使用门槛',
      dataIndex: 'limit',
      width: 150,
      ellipsis: true
    },
    {
      title: '创建人',
      dataIndex: 'createBy',
      width: 120
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 120
    },
  ];
 

  const getColumns = () => {
    return fieldColumns;
  }


  useImperativeHandle(ref, () => ({
    refreshTable
  }));


  useEffect(() => {
    if (tabKey === activeKey && tabChangeShouldUpdateTab.includes(activeKey)) {
      search({
        pageNum: pagination.pageNum,
        pageSize: pagination.pageSize
      });
    }
  }, [tabKey, activeKey]);

  useComponentDidMount(() => {
    if (!tabChangeShouldUpdateTab.includes(activeKey)) {
      search({
        pageNum: pagination.pageNum,
        pageSize: pagination.pageSize
      });
    }
  })


  return (
    <>
      <Table
         bordered
         rowKey="id"
         dataSource={dataSource}
         columns={getColumns()}
         scroll={{x: calculateTableWidth(getColumns())}}
         pagination= {{
          showTotal: (total: number) => `共 ${total} 条`,
          ...pagination,
          onChange: (pageNum, pageSize) => {
            search({pageNum, pageSize});
          }
         }}
      />
    </>
  );
});


export default CouponListTable;